<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图案例</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>
<div class="banner">
    <ul class="pic" id="pictures">
        <li><img
                src="//img30.360buyimg.com/pop/s1180x940_jfs/t1/181238/30/246/59185/607fe2adEcde3a64e/459c5e2f5a931383.jpg.webp">
        </li>
        <li><img
                src="//imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/100000771118/FocusFullshop/CkNqZnMvdDEvMTQxNDE2LzI1LzEwOTAwLzY4NzcyLzVmODZkNmQzRTZlMWQ5NDVlL2VjOTYxNzgyZGUxMWY3YTYuanBnEgo5OTktdHlfMF8xMAE47ot6/cr/s/q.jpg">
        </li>
        <li><img
                src="//imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/100008184386/FocusFullshop/CkNqZnMvdDEvNzA4OTMvMzQvMTM0MTQvMTQ4MzQ1LzVkYWQ3ZTJiRWI0ZmRiMDBlL2RiNmVlY2U3NzYyM2ZjODgucG5nEgkyLXR5XzBfNTMwAjjui3pCEwoP5Y-M5rGH54Gr6IW_6IKgEABCEAoM5LyY5Lqr5aW96LSnEAFCEAoM56uL5Y2z5oqi6LStEAJCCgoG5LyY6YCJEAc/cr/s/q.jpg">
        </li>
    </ul>
    <div>
        <a class="left_btn" id="left_btn">&lt;</a>
        <a class="right_btn" id="right_btn">&gt;</a>
    </div>
    <ol class="sub" id="subs">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>
</body>
</html>
